<template>
  <el-dialog
    v-model="dialogVisible"
    title="智能攻略生成"
    width="900px"
    :close-on-click-modal="false"
    destroy-on-close
    class="strategy-dialog"
  >
    <div class="strategy-generator">
      <!-- 景点信息 -->
      <div v-if="spot" class="spot-info mb-6 bg-gray-50 rounded-lg p-4">
        <div class="flex items-start space-x-4">
          <el-image
            :src="spot.cover"
            class="w-24 h-24 rounded-lg object-cover flex-shrink-0"
          >
            <template #error>
              <div class="image-slot">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
          <div class="flex-1">
            <h3 class="text-lg font-medium mb-2">{{ spot.name }}</h3>
            <div class="spot-rating flex items-center mb-2">
              <el-rate
                :model-value="spot.rating"
                disabled
                text-color="#ff9900"
              />
              <span class="text-orange-500 ml-2">{{ spot.rating }}分</span>
            </div>
            <p class="text-gray-600 text-sm line-clamp-2">
              {{ spot.description }}
            </p>
          </div>
        </div>
      </div>

      <!-- 攻略表单 -->
      <div class="strategy-form mb-6">
        <el-form :model="strategyForm" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="游玩天数" required>
                <el-input-number
                  v-model="strategyForm.days"
                  :min="1"
                  :max="7"
                  controls-position="right"
                  class="w-full"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出行人群" required>
                <el-select v-model="strategyForm.travelWith" class="w-full">
                  <el-option label="个人" value="single">
                    <el-icon><User /></el-icon>
                    <span class="ml-2">个人</span>
                  </el-option>
                  <el-option label="情侣" value="couple">
                    <el-icon><UserFilled /></el-icon>
                    <span class="ml-2">情侣</span>
                  </el-option>
                  <el-option label="家庭" value="family">
                    <el-icon><House /></el-icon>
                    <span class="ml-2">家庭</span>
                  </el-option>
                  <el-option label="朋友" value="friends">
                    <el-icon><Users /></el-icon>
                    <span class="ml-2">朋友</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="预算范围" required>
                <el-select v-model="strategyForm.budget" class="w-full">
                  <el-option label="经济实惠" value="low">
                    <el-icon><Money /></el-icon>
                    <span class="ml-2">经济实惠 (¥0-500)</span>
                  </el-option>
                  <el-option label="中等消费" value="medium">
                    <el-icon><Money /></el-icon>
                    <span class="ml-2">中等消费 (¥500-1000)</span>
                  </el-option>
                  <el-option label="高端享受" value="high">
                    <el-icon><Money /></el-icon>
                    <span class="ml-2">高端享受 (¥1000+)</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="季节">
                <el-select v-model="strategyForm.season" class="w-full">
                  <el-option label="春季" value="spring">
                    <el-icon><Sunny /></el-icon>
                    <span class="ml-2">春季 (3-5月)</span>
                  </el-option>
                  <el-option label="夏季" value="summer">
                    <el-icon><Sunny /></el-icon>
                    <span class="ml-2">夏季 (6-8月)</span>
                  </el-option>
                  <el-option label="秋季" value="autumn">
                    <el-icon><Sunny /></el-icon>
                    <span class="ml-2">秋季 (9-11月)</span>
                  </el-option>
                  <el-option label="冬季" value="winter">
                    <el-icon><Sunny /></el-icon>
                    <span class="ml-2">冬季 (12-2月)</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="特别兴趣">
            <el-select
              v-model="strategyForm.interests"
              multiple
              collapse-tags
              collapse-tags-tooltip
              class="w-full"
            >
              <el-option label="历史文化" value="culture">
                <el-icon><Collection /></el-icon>
                <span class="ml-2">历史文化</span>
              </el-option>
              <el-option label="自然风光" value="nature">
                <el-icon><Sunny /></el-icon>
                <span class="ml-2">自然风光</span>
              </el-option>
              <el-option label="美食体验" value="food">
                <el-icon><Food /></el-icon>
                <span class="ml-2">美食体验</span>
              </el-option>
              <el-option label="购物娱乐" value="shopping">
                <el-icon><ShoppingCart /></el-icon>
                <span class="ml-2">购物娱乐</span>
              </el-option>
              <el-option label="户外运动" value="sports">
                <el-icon><Place /></el-icon>
                <span class="ml-2">户外运动</span>
              </el-option>
              <el-option label="摄影打卡" value="photography">
                <el-icon><Camera /></el-icon>
                <span class="ml-2">摄影打卡</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="特殊需求">
            <el-input
              v-model="strategyForm.specialNeeds"
              type="textarea"
              :rows="3"
              placeholder="请输入其他特殊需求，如行动不便、带婴儿等"
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 生成的攻略内容 -->
      <div v-if="generatedStrategy" class="strategy-content">
        <div class="strategy-header bg-primary-50 p-4 rounded-lg mb-6">
          <h3 class="text-lg font-medium text-primary-600 mb-2">
            {{ generatedStrategy.title }}
          </h3>
          <div class="text-sm text-gray-500">
            {{ generatedStrategy.summary }}
          </div>
        </div>

        <!-- 每日行程 -->
        <div class="daily-itineraries space-y-6">
          <div
            v-for="(day, index) in generatedStrategy.itinerary"
            :key="index"
            class="day-itinerary bg-white rounded-lg border border-gray-200 hover:shadow-md transition-shadow"
          >
            <div
              class="day-header bg-gray-50 px-4 py-3 rounded-t-lg border-b border-gray-200"
            >
              <h4 class="font-medium flex items-center">
                <el-icon class="mr-2"><Calendar /></el-icon>
                第{{ index + 1 }}天行程
              </h4>
            </div>
            <div class="day-content p-4">
              <div class="timeline space-y-4">
                <div
                  v-for="(item, itemIndex) in day.schedule"
                  :key="itemIndex"
                  class="timeline-item flex"
                >
                  <div class="time-col w-24 text-gray-500 text-sm pt-1">
                    {{ item.time }}
                  </div>
                  <div class="content-col flex-1">
                    <div
                      class="activity-card bg-gray-50 p-3 rounded-lg hover:bg-gray-100 transition-colors"
                    >
                      <div
                        class="activity-title font-medium mb-2 flex items-center"
                      >
                        <el-icon class="mr-2"><Location /></el-icon>
                        {{ item.title }}
                      </div>
                      <div class="activity-desc text-sm text-gray-600">
                        {{ item.description }}
                      </div>
                      <div
                        v-if="item.tips"
                        class="activity-tips mt-2 text-sm text-primary-600"
                      >
                        <el-icon><InfoFilled /></el-icon>
                        <span class="ml-1">{{ item.tips }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 攻略建议 -->
        <div class="strategy-tips mt-6">
          <h4 class="text-lg font-medium mb-4 flex items-center">
            <el-icon class="mr-2"><InfoFilled /></el-icon>
            贴心建议
          </h4>
          <el-card class="box-card hover:shadow-md transition-shadow">
            <template #header>
              <div class="card-header flex items-center">
                <el-icon class="mr-2"><List /></el-icon>
                <span>出行准备</span>
              </div>
            </template>
            <div class="tips-content space-y-3">
              <div
                v-for="(tip, index) in generatedStrategy.tips"
                :key="index"
                class="tip-item flex items-start hover:bg-gray-50 p-2 rounded-lg transition-colors"
              >
                <el-icon class="text-primary-600 mt-1 mr-2"><Check /></el-icon>
                <span>{{ tip }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 生成中状态 -->
      <div
        v-else-if="generating"
        class="generating-status h-60 flex items-center justify-center"
      >
        <div class="text-center">
          <div class="loading-animation mb-4">
            <el-icon class="text-4xl text-primary-600 animate-spin">
              <Loading />
            </el-icon>
          </div>
          <div class="text-gray-600">正在生成个性化攻略，请稍候...</div>
          <div class="text-sm text-gray-400 mt-2">
            AI正在为您精心规划每一个细节
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer flex justify-between items-center">
        <div class="tips text-sm text-gray-500">
          <el-icon><InfoFilled /></el-icon>
          <span class="ml-1"
            >提示：生成的攻略会根据实时天气、客流量等数据动态调整</span
          >
        </div>
        <div class="actions space-x-2">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="generating"
            :disabled="!canGenerate"
            @click="generateStrategy"
          >
            <el-icon class="mr-1"><Magic /></el-icon>
            {{ generating ? "生成中..." : "生成攻略" }}
          </el-button>
          <el-button
            v-if="generatedStrategy"
            type="success"
            @click="handleSave"
          >
            <el-icon class="mr-1"><Download /></el-icon>
            保存攻略
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import {
  User,
  UserFilled,
  Users,
  House,
  Money,
  Collection,
  Sunny,
  Food,
  ShoppingCart,
  Place,
  Camera,
  Loading,
  InfoFilled,
  Check,
  Magic,
  Download,
  Calendar,
  Location,
  List,
  Picture,
} from "@element-plus/icons-vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  spot: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["update:modelValue", "save"]);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

const strategyForm = ref({
  days: 1,
  travelWith: "single",
  budget: "medium",
  season: getCurrentSeason(),
  interests: [],
  specialNeeds: "",
});

const generating = ref(false);
const generatedStrategy = ref(null);

// 获取当前季节
function getCurrentSeason() {
  const month = new Date().getMonth() + 1;
  if (month >= 3 && month <= 5) return "spring";
  if (month >= 6 && month <= 8) return "summer";
  if (month >= 9 && month <= 11) return "autumn";
  return "winter";
}

// 是否可以生成攻略
const canGenerate = computed(() => {
  return (
    strategyForm.value.days > 0 &&
    strategyForm.value.travelWith &&
    strategyForm.value.budget
  );
});

// 生成攻略
async function generateStrategy() {
  if (!canGenerate.value) {
    ElMessage.warning("请完善攻略生成所需信息");
    return;
  }

  try {
    generating.value = true;
    // TODO: 调用AI接口生成攻略
    await new Promise((resolve) => setTimeout(resolve, 2000));

    // 模拟生成的攻略数据
    generatedStrategy.value = {
      title: `贵港${props.spot.name}${strategyForm.value.days}日游玩攻略`,
      summary: "为您量身定制的深度游攻略，融合当地特色景点、美食与文化体验。",
      itinerary: [
        {
          schedule: [
            {
              time: "09:00",
              title: props.spot.name,
              description:
                "从这里开始，感受贵港的自然风光。建议在此停留2小时，可以漫步江边，欣赏邕江美景。",
              tips: "早晨天气凉爽，非常适合户外活动",
            },
            {
              time: "11:30",
              title: "品尝地道美食",
              description: "在附近的老街品尝贵港特色小吃，如粉皮、酸辣粉等。",
              tips: "推荐老街口小吃店，价格实惠，口味地道",
            },
          ],
        },
      ],
      tips: [
        "建议提前1天关注天气预报，合理安排行程",
        "准备舒适的步行鞋，部分景点需要步行",
        "建议携带充电宝，方便拍照记录精彩瞬间",
        "景区内设有休息区和饮水点，可以适时补充体力",
        "可以下载离线地图，方便导航",
      ],
    };

    ElMessage.success("攻略生成成功");
  } catch (error) {
    ElMessage.error("生成攻略失败，请重试");
  } finally {
    generating.value = false;
  }
}

// 保存攻略
function handleSave() {
  if (!generatedStrategy.value) {
    ElMessage.warning("请先生成攻略");
    return;
  }

  emit("save", {
    form: strategyForm.value,
    strategy: generatedStrategy.value,
  });
  dialogVisible.value = false;
}
</script>

<style lang="scss" scoped>
.strategy-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 24px;
  }
}

.strategy-generator {
  .image-slot {
    @apply flex items-center justify-center w-full h-full bg-gray-200 text-gray-400;
  }

  .timeline {
    .timeline-item {
      @apply relative pl-4;

      &::before {
        content: "";
        @apply absolute left-0 top-0 w-px h-full bg-gray-200;
      }

      &::after {
        content: "";
        @apply absolute left-[-3px] top-2 w-[7px] h-[7px] rounded-full bg-primary-600;
      }

      &:last-child::before {
        @apply h-4;
      }
    }
  }

  .tips-content {
    .tip-item {
      @apply py-1;
    }
  }

  .loading-animation {
    .el-icon {
      animation: bounce 1s infinite;
    }
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
</style>
